<template>
  <!-- 人员弹窗 -->
  <a-modal
    :footer="false"
    centered
    :title="headerTitle"
    :visible.sync="dialogVisible"
    @cancel="handleCancel"
    width="1200px"
  >
    <a-row :gutter="10">
      <!-- 侧边栏 -->
      <a-col :span="6" style="border-right: 1px solid #d9d9d9">
        <!-- 公司组织树搜索 -->
        <tree-organization
          ref="treeOrganization"
          @loader="search"
          :autoSelect="false"
          :selectedKeys.sync="selectedKeys"
          :selectOptions.sync="selectOptions"
        />
      </a-col>
      <!-- 主内容 -->
      <a-col :span="18">
        <a-input-search
          v-model="key"
          placeholder="请输入员工名称/电话号码/员工编号"
          class="mb12"
          :maxLength="30"
          @search="search"
        ></a-input-search>
        <!-- 表格 -->
        <s-table
          ref="table"
          :scroll="{ y: 300 }"
          tableLayout="fixed"
          size="default"
          :rowKey="(row) => row.id || row.employeeId"
          :columns="columns"
          :data="loadData"
          :alert="true"
          show-size-changer
          show-quick-jumper
          showPagination="auto"
        >
          <!-- 表格操作栏 -->
          <span slot="actions" slot-scope="text, record">
            <template>
              <a @click="handleSubmit(record)">添加</a>
            </template>
          </span>
        </s-table>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
import { STable } from '@/components' // 表格
import TreeOrganization from '@/components/businessComponents/TreeOrganization' // 树
import { getOrgsTree } from '@/api/subassembly/TreeSelectOrganization' // api
import cloneDeep from 'lodash.clonedeep' // 深拷贝
export default {
  name:'a'+ Date.now(),
  components: {
    STable,
    TreeOrganization,
  },
  props: {
    // 显隐控件
    visible: {
      type: Boolean,
      default() {
        return false
      },
    },
    // 表单
    form: {
      type: Object,
      default() {
        return {}
      },
    },
    // 标题
    headerTitle: {
      type: String,
      default() {
        return '添加安全库人员'
      },
    },
    // 列表api
    api: {
      type: Object,
      default() {
        return {}
      },
    },
    // 列表api请求axios
    loadList: {
      type: String,
      default() {
        return 'getList'
      },
    },
  },
  computed: {
    // 树节点api
    apiTree() {
      return { getOrgsTree }
    },
    // 与父组件绑定visible
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (e) {
        this.$emit('update:visible', e)
      },
    },
    // 表格列表请求参数
    args() {
      let args = {}
      // 添加树节点id
      if (this.selectedKeys.length > 0) {
        args.subItemId = this.selectedKeys[0]
      }
      // 若表单不为空
      if (Object.keys(this.form)?.length) {
        Object.assign(args, this.form)
      }
      // 若关键词存在
      this.key && (args.key = this.key)
      return args
    },
  },
  data() {
    return {
      queryParam: {},
      key: '',
      selectedKeys: {},
      loadData: (parameter) => {
        // 若未选中则不渲染
        // if (!this.args.subItemId) {
        //   return false
        // }
        const requestParameters = Object.assign({}, parameter, this.args)
        return this.api[this.loadList](requestParameters).then((res) => {
          return res
        })
      },
      columns: [
        {
          title: '员工名称',
          dataIndex: 'employeeName',
        },
        {
          title: '员工编码',
          dataIndex: 'employeeNo',
        },
        {
          title: '电话号码',
          dataIndex: 'phone',
        },
        {
          title: '职称',
          dataIndex: 'title',
        },
        {
          title: '操作',
          dataIndex: 'actions',
          width: '100px',
          scopedSlots: { customRender: 'actions' },
        },
      ],
      selectOptions: {},
    }
  },
  methods: {
    // 头部搜索
    search() {
      this.$refs.table.refresh(true)
    },
    handleSubmit(record) {
      let that = this
      record.subItemId = that.args.subItemId
      that.$emit('confirm', record)
    },
    handleCancel() {
      this.dialogVisible = false
    },
  },
  watch: {
    visible(e) {
      if (e) {
        !this.$refs.treeOrganization &&
          this.$nextTick(() => {
            this.$refs.treeOrganization.getList()
          })
      } else {
        // 初始化表单
        this.keyword = ''
      }
    },
  },
}
</script>
